import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Modal } from "react-native";
import QRCodeScanner from "react-native-qrcode-scanner"
import { RNCamera } from "react-native-camera"
import { Icon } from "@rneui/themed";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ScanModal = () => {

    const { modalVisible, setModalVisible, handleReadCode } = useContext(CommonContext)

    const handlePressClose = () => {
        setModalVisible(false)
    }

    return (
        <Modal
            animationType="none"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}>
            <View style={styles.container}>
                <View style={styles.camera_content}>
                    <QRCodeScanner
                        onRead={(e) => { handleReadCode(e) }}
                        cameraProps={{
                            flashMode: RNCamera.Constants.FlashMode.auto,
                            barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
                            type: RNCamera.Constants.Type.back,
                        }}
                        showMarker={true}
                        customMarker={<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                            <View style={{ flex: 9, justifyContent: 'center' }}>
                                <Icon
                                    type="ionicon"
                                    name="ios-scan-outline"
                                    size={width * 0.73}
                                    color='#E1E1E1'
                                />
                            </View>
                            <View style={{ flex: 1, justifyContent: 'flex-start' }}>
                                <Icon
                                    type="antdesign"
                                    name="closecircleo"
                                    size={50}
                                    onPress={handlePressClose}
                                    color='#E1E1E1' />
                            </View>
                        </View>}
                        bottomContent={<View style={{ backgroundColor: 'blue' }}></View>}
                        cameraStyle={styles.cameraStyle}
                        markerStyle={styles.markerStyle}
                    />
                </View>
            </View >
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    camera_content: {
        flex: 1,
        backgroundColor: '#232323',
        justifyContent: 'center',
        alignItems: 'center'
    },
    cameraStyle: {
        width: '100%',
        height: '100%'
    },
    markerStyle: {
        width: 180 * ratio,
        height: 180 * ratio,
        color: '#E1E1E1'
    },
    scanBar: {
        width: width * 0.46,
        height: 2,
        backgroundColor: '#5757F9',
        marginLeft: 40 * ratio
    }
})
export default ScanModal